<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0 auto;
            font-size: 12px;
            font-family: "微软雅黑", arial;
            line-height: 22px;
            background: #e0ecfa;
        }

        div,
        p,
        input,
        li,
        h1,
        h2,
        h3,
        h4,
        h5 {
            height: auto;
            margin: 0;
            padding: 0px;
            vertical-align: middle;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        img {
            border: 0;
            margin: 0;
            padding: 0;
        }

        .web {
            width: 1140px;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
            background: #FFF;
            padding: 0px 30px;
        }

        .top {
            height: 55px;
            padding-top: 15px;
        }


        .logo {
            width: 116px;
            height: 39px;
            float: left;
            margin-right: 50px;
        }

        .nav {
            width: 720px;
            height: 39px;
            float: left;
        }

        .nav ul {
            padding: 0px;
            margin: 0;
        }

        .nav ul li {
            height: 39px;
            line-height: 39px;
            float: left;
            margin: 0px 20px;
        }

        .nav ul li a {
            font-size: 18px;
            color: #000;
        }

        .sous {
            width: 140px;
            height: 39px;
            float: right;
        }

        .inut {
            width: 110px;
            height: 39px;
            border: none;
            border-bottom: 1px solid #000;
            float: left;
        }

        .btn {
            width: 30px;
            height: 30px;
            background: url(./img/搜索.png) no-repeat;
            border: none;
            margin-top: 10px;
        }

        .banner {
            width: 1140px;
            height: 364px;
            margin-bottom: 25px;
        }

        .box1 {
            width: 910px;
            height: 90px;
            margin: 0 auto;
            margin-bottom: 40px;
        }

        .box1 .bx {
            width: 88px;
            height: 90px;
            float: left;
            margin: 0px 60px;
            text-align: center;
            font-size: 14px;
        }

        .box1 .bx img {
            margin-bottom: 10px;
        }

        .tit {
            height: 60px;
            line-height: 60px;
            padding-left: 20px;
            font-size: 26px;
            margin-bottom: 15px;
            color: #464543;
        }

        .box2 {
            height: 250px;
        }

        .box2 .bx2 {
            width: 193px;
            height: 250px;
            float: left;
            margin: 0px 17px;
            text-align: center;
            font-size: 16px;
        }

        .box2 .bx2 img {
            margin-bottom: 15px;
            width: 220px;
        }

        .box3 {
            height: 300px;
        }

        .box3 .bx3 {
            width: 337px;
            height: 270px;
            float: left;
            margin: 0px 18px;
        }

        .box3 .bx3 img {
            margin-bottom: 10px;
            width: 270px;
            height: 280px;
        }

        .box3 .bx3 p {
            line-height: 25px;
            font-size: 16px;
        }

        .box4 {
            height: 305px;
        }

        .box4 .bx4 {
            width: 337px;
            height: 305px;
            float: left;
            margin: 0px 18px;
        }

        .foot {
            height: 123px;
            background: #588fb8;
            padding-top: 40px;
        }

        .foot p {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #FFF;
            text-align: center;
        }

        .title2 {
            height: 60px;
            line-height: 60px;
            margin-bottom: 20px;
        }

        .title2 h1 {
            font-size: 26px;
            padding-left: 20px;
            font-size: 26px;
            margin-bottom: 15px;
            color: #464543;
            font-weight: normal;
        }

        .music {
            width: 1140px;
            height: 1050px;
        }

        .music ul {
            padding: 0px;
        }

        .music ul li {
            width: 206px;
            height: 340px;
            float: left;
            margin: 0px 10px;
        }

        .music ul li img {
            width: 206px;
            height: 224px;
            margin-bottom: 15px;
        }

        .music ul li h1 {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            font-weight: normal;
        }

        .music ul li h1 a {
            color: #000;
        }

        .music ul li h2 {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            font-weight: normal;
            color: #b3afaf;
        }

        /*--登陆注册---*/
        .neir {
            width: 1140px;
            margin-bottom: 100px;
            overflow: hidden;
        }

        .conr {
            width: 380px;
            height: 416px;
            background: #cbe7fc;
            margin: 0 auto;
        }

        .lewm {
            width: 381px;
            height: 381px;
        }

        .login {
            width: 308px;
            height: 300px;
            margin: 0 auto;
            padding-top: 30px;
        }

        .login-title {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #3c3c3c;
            padding-bottom: 20px;
            font-weight: 700;
        }

        .txt {
            width: 300px;
            height: 40px;
            border: #CCC 1px solid;
            margin-top: 10px;
        }

        .txt .wez {
            width: 40px;
            height: 40px;
            float: left;
        }

        .txt .input {
            width: 240px;
            float: left;
            padding-left: 20px;
            color: #666;
            height: 40px;
            border: none;
        }

        .txt .input2 {
            width: 290px;
            float: left;
            padding-left: 10px;
            color: #666;
            height: 40px;
            border: none;
        }

        .passw {
            width: 300px;
            height: 20px;
            margin-top: 20px;
            font-size: 12px;
        }

        .password {
            float: left;
        }

        .passw a {
            text-decoration: none;
            color: #333;
        }

        .zhuce {
            float: right;
        }

        .lbtn {
            width: 300px;
            font-size: 16px;
            margin-top: 25px;
            height: 42px;
            border: 0;
            overflow: hidden;
            vertical-align: middle;
            line-height: 42px;
            color: #fff;
            background: url(../images/ico7.png) no-repeat;
        }

        .jies {
            width: 1140px;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
        }

        .lv-box {
            height: 225px;
            padding: 20px 0px;
        }

        .lv-box img {
            width: 300px;
            height: 203px;
            float: left;
            margin-right: 20px;
        }

        .lv-box-r {
            width: 820px;
            height: 225px;
            float: left;
        }

        .lv-box .lv-tit {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
        }

        .lv-box p {
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 2em;
        }

        .lv-box a {
            color: #000;
        }

        .lv-box span {
            height: 50px;
            line-height: 50px;
            float: right;
            margin-right: 20px;
        }

        .lv-box span a {
            color: #F00;
        }

        .nr {
            width: 1140px;
            height: auto;
            overflow: hidden;
            background: #FFF;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .neititle {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            border-bottom: #CCC 1px dashed;
            margin-bottom: 20px;
        }

        .llbx1 {
            height: auto;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .img1 {
            margin: 0px 20px;
            float: left;
            float: left
        }

        .img2 {
            margin: 0px 20px;
            float: left;
            float: right;
        }

        .llbx1 p {
            font-size: 16px;
            line-height: 30px;
            text-indent: 2em;
        }
        .bx4{
            background-color: chartreuse;
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div class="web">
        <div class="top">
            <div class="logo"><img src="" alt=""></div>
            <div class="nav">
                <ul>
                    <li><a href="">网站首页</a></li>
                    <li><a href="">热门人物</a></li>
                    <li><a href="">热门推荐</a></li>
                    <li><a href="">会员登录</a></li>
                    <li><a href="">会员注册</a></li>
                </ul>
            </div>
            <div class="sous">
                <form>
                    <input class="inut" />
                    <button class="btn"></button>
                </form>
            </div>
        </div>

        <div class="banner">
            <img src="./img/1.jpeg" alt="">
        </div>
        <div class="box1">
            <div class="bx">
                <img src="" alt="">
                <p>热门连载</p>
            </div>
            <div class="bx">
                <img src="" alt="">
                <p>最新更新</p>
            </div>
            <div class="bx">
                <img src="" alt="">
                <p>新番动漫</p>
            </div>
            <div class="bx">
                <img src="" alt="">
                <p>经典完结</p>
            </div>
        </div>

        <div class="tit">热门动漫人物</div>
        <div class="box2">
            <div class="bx2">
                <img src="./img/4.jpg" alt="">
                晓美焰
            </div>
            <div class="bx2">
                <img src="./img/5.jpg" alt="">
                鹿目圆
            </div>
            <div class="bx2">
                <img src="./img/3.jpg" alt="">
                漩涡鸣人
            </div>
            <div class="bx2">
                <img src="./img/2.jpg" alt="">
                宇智波佐助
            </div>
            
        </div>
        <div class="tit">经典动漫</div>
        <div class="box3">
            <div class="bx3">
                <img src="./img/6.jpg" alt="">
                <p>魔法少女小圆</p>
            </div>
            <div class="bx3">
                <img src="./img/7.jpg" alt="">
                <p>火影忍者</p>
            </div>
            <div class="bx3">
                <img src="./img/8.jpg" alt="">
                <p>紫罗兰永恒花园</p>
            </div>
        </div>
        <div class="tit">最新更新</div>
        <div class="bx4">
            <div class="bx5">
                <img src="" alt="">
               <h1><a href="./响应.html">响应</a></h1>
            </div>
            <div class="bx6">
                <img src="" alt="">
               <h1> <a href="./多列.html">多列</a></h1>
            </div>
            <div class="bx6">
                <img src="" alt="">
           <h1> <a href="../css任务3/布局flex.html">布局</a></h1>
            </div>
            <div class="bx7">
             <img src="" alt=""> 
           <h1>  <a href="./骰子.html">骰子</a></h1>
            </div>
            <img src="" alt="">
            <h1><a href="https://gitee.com/mio-K_ON/main">仓库地址</a></h1>
        </div>
        <div class="foot">
            <p>Copyright&copy;经典动漫网版权所有Rights Reserved.</p>
        </div>
    </div>
</body>
</html>